.@{menu-prefix-cls} {
  &-horizontal {
    &.@{menu-prefix-cls}-light {
      &::after {
        display: none;
      }
    }
  }

  &-light {
    background: @component-background;
  }

  &-light&-horizontal &-item,
  &-light&-horizontal &-submenu {
    color: @color-5;

    &-active {
      display: flex;
      justify-content: center;
      border-bottom: 0;
      font-weight: 600;
      color: @primary-color;

      &::after {
        position: absolute;
        bottom: -2px;
        width: 24px;
        height: 5px;
        background-color: @primary-color;
        content: '';
      }
    }

    &-active:hover {
      &::after {
        //width: 100%;
      }
    }

    &:hover {
      border-bottom: 0 solid transparent;
    }
  }

  &-dark&-horizontal &-item,
  &-dark&-horizontal &-submenu {
    &-active,
    &:hover {
      color: @component-background;
    }
  }

  &-primary&-horizontal &-item,
  &-primary&-horizontal &-submenu {
    color: @component-background;
  }

  &-vertical &-item {
    padding: 10px 24px;
    margin: 0 12px;
    border-radius: 4px;
  }

  &-light&-vertical &-item {
    &-active:not(.@{menu-prefix-cls}-submenu) {
      background: @bg-3;

      &::after {
        display: none;
      }
    }
  }

  &-dark&-vertical &-item,
  &-dark&-vertical &-submenu-title {
    &:hover {
      color: @component-background;
    }
  }

  &-dark&-vertical &-submenu &-item {
    &:hover {
      color: @component-background;
    }

    &-active,
    &-active:hover {
      color: @component-background;
    }
  }

  &-dark&-vertical &-child-item-active > &-submenu-title {
    color: @component-background;
  }
}
